<template>
  <view class="container">
    <view class="list" style="background-color: #fff; margin-top: 20rpx; padding-right: 20rpx">
      <view style="width: 95%; display: flex; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8; padding: 30rpx" v-for="item in list" :key="item">
        <view style="height: 132rpx; line-height: 132rpx; position: relative">
          <image :src="img_url + item.avatar" style="width: 110rpx; height: 110rpx; vertical-align: middle; border-radius: 50%"></image>
          <text style="margin-left: 20rpx">{{ item.nickname }}</text>
        </view>
        <view style="display: flex; flex-direction: column; justify-content: center">
          <view style="width: 132rpx; height: 50rpx; background-color: #f8f8f8; text-align: center; border-radius: 25rpx">
            <text style="font-size: 24rpx; color: #999" @click="unmask(item.id)">解除拉黑</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getBlackList, removeBlack } from '@/utils/my.js';
export default {
  data() {
    return {
      list: [],
      img_url: this.img_url
    };
  },
  async onShow() {
    const res = await getBlackList();
    this.list = res.data;
    console.log(res.data);
  },
  methods: {
    async unmask(id) {
      await removeBlack({ black_user_id: id });
      const res = await getBlackList();
      this.list = res.data;
      uni.showToast({
        title: '解除成功',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}
</style>
